<template>
  <div>
    <button>{{ l[0] }}</button>
    <button>{{ l[1] }}</button>
    <button>{{ l[2] }}</button>
    <button>{{ l[3] }}</button>
    <template v-for="(e, i) in l" :key="i">
      <button>{{ e }}</button>
    </template>
    <button v-if="s">go</button>
    <ElDivider>-----</ElDivider>
    <ElButton type="warning" @click="see">sse</ElButton>
    <ElButton type="danger" @click="saw">sse close</ElButton>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import { defineComponent } from "vue";

export default defineComponent({
  name: "FirstView",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      l: [1, 2, 3, 4],
      s: false,
      eventSource: null as unknown as EventSource,
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    saw() {
      this.eventSource.close()
    },
    see() {
      console.log("event source begin");
      this.eventSource = new EventSource("/api/stream");
      // 正常的EventSource，我们只关心以下三个事件
      /*
       * open：订阅成功（和后端连接成功）
       */
      this.eventSource.addEventListener("open", function (e) {
        console.log("open successfully");
      });
      /*
       * message：后端返回信息，格式可以和后端协商
       */
      this.eventSource.addEventListener("message", function (e) {
        console.log(e.data);
      });
      /*
       * error：错误（可能是断开，可能是后端返回的信息）
       */
      this.eventSource.addEventListener("error", function (err) {
        console.log(err);
      });

      // 需要关闭了
 
    },
  },
  watch: {
    // sampleP(n, o) {},
  },
});
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
